<script lang="ts" setup>
  import { CommonHeader } from '@/components/Header';
  import SearchInput from '@/components/SearchInput/index.vue';
  import { SearchScrollWrapper } from '@/components/ScrollWrapper';

  import { useInfoSearch, useState } from '@/hooks';

  defineOptions({
    name: 'SearchPage',
  });

  const [errorShow, setErrorShow] = useState(false);
  const [loadingShow, setLoadingShow] = useState(false);
  const { state, onKeywordSearch } = useInfoSearch(
    setLoadingShow,
    setErrorShow
  );
</script>

<template>
  <div class="container">
    <common-header title="商家搜索" is-show-back />
    <search-input
      :keyword="state.keyword"
      :placeholder="state.placeholder"
      @on-search="onKeywordSearch"
    />
    <search-scroll-wrapper
      :data="state.searchData"
      :errorShow="errorShow"
      :loadingShow="loadingShow"
    />
  </div>
</template>
